<template>
    <div class="desktop">
        <div v-for="(item,index) in menuData" :key="index">
            <el-link class="mainMenu" type="primary" :underline="false" herf="#">{{item.title}}</el-link>
            <div class="secondMenu">
                <ul class="ul2">
                    <li v-for="(item1,index1) in item.items" :key="index1" class="li2" @mouseover="mouseover($event)" @mouseout="mouseout($event)">
                        <span class="sp2">
                            <span class="imageSpan" v-if="item1.tabName!=''" @click="addParentTab(item1.tabName,item1.title,item1.url,index+'-'+index1)">
                                <img class="app_img" v-if="item1.image!=''&&item1.image!=undefined&&item1.image!=null" :src="'images/'+item1.image">
                                <img class="app_img" v-else src="images/none.jpg">
                            </span>
                            <span  class="imageSpan" v-else>
                                <img class="app_img" v-if="item1.image!=''&&item1.image!=undefined&&item1.image!=null" :src="'images/'+item1.image">
                                <img class="app_img" v-else src="images/none.jpg">
                            </span>
                            <span class="app_text">{{item1.title}}</span>
                        </span>
                    </li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</template>
<script>
    module.exports = {
        data: function () {
            return{
                defaultClass:"li2",
                menuData:[],
            }
        },
        mounted:function(){
            this.getMenu();
        },
        watch:{
            "$route":function(){

            },
        },
        methods:{
            addTab:function (tabName,targetName,url,MenuIndex) {

            },
            getMenu:function () {
                let _this=this;
                axios.get('menuData/menuData.json').then(function (response) {
                    _this.menuData=response.data;
                    console.log(_this.menuData);
                }).catch(function (error) {
                    _this.$message.error('读取本地菜单失败');
                    console.error(error);
                })
            },
            changeMenu:function (activeMenu) {

            },
            mouseover:function($event){
                $event.currentTarget.className = "li2_1"
            },
            mouseout:function($event){
                $event.currentTarget.className = "li2"
            },
            addParentTab:function(tabName,targetName,url,MenuIndex){
                parent.vm.$refs.tabs.addTab(tabName,targetName,url,MenuIndex);
            }
        }
    }
</script>
<style>
    .desktop{
        margin: 10px;
        padding: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .1);
    }
    .mainMenu{
        font-weight: bold;
        font-size: larger;
        margin-bottom: 10px;
    }
    .secondMenu{
        min-height: 100px;
        margin-bottom: 30px;
    }
    .ul2 {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }
    .li2{
        list-style: none;
        width: 100px;
        height: 100px;
        float: left;
        margin-left: 30px;
        cursor: pointer;
        border: 1px solid #fff;
    }
    .li2_1{
        list-style: none;
        width: 100px;
        height: 100px;
        float: left;
        margin-left: 30px;
        cursor: pointer;
        border: 1px solid #58A1FA;
        background-color: #d6eaf9;
    }
    .sp2 {
        list-style: none;
        width: 100px;
        height: 100px;
        float: left;
        cursor: pointer;
    }
    .imageSpan{
        height:74px;
        width:100px;
        display:block;
    }
    .app_img {
        width: 65px;
        height: 65px;
        margin-top: 8px;
        margin-left: 18px;
    }
    .app_text {
        display: block;
        width: 100px;
        font-size: 13px;
        color: #555;
        text-align: center;
        line-height: 26px;
    }
    .clear{
        clear: both;
    }
</style>